<template>
    <div>
        <el-button class="custom-btn" type="primary" @click="myExam">我的考试</el-button>
        <el-dialog class="my-exam-dialog fire-exam-dialog" v-model="myExamDialogVisible" title="我的考试" width="42%" top="10%"
            draggable destroy-on-close :before-close="handleMyExamClose">
            <div class="dialog-body" v-loading="loading">
                <div class="wrap">
                    <div class="exam-state-box">
                        <img src="/src/assets/images/beginner-level.png" alt="">
                        <div class="layer">{{ approveStatusText }}</div>
                    </div>
                    <div class="info">
                        <p class="name">初级消防接警调度员考试</p>
                        <p class="date">考试时间：2023-12-23 9:30 ~ 2023-12-23 12:00</p>
                        <div class="address" v-if="reviewPassed">
                            <span>考试地点：</span>
                            <el-select v-model="roomId" placeholder="请选择考试地点" clearable style="margin-right: 14px;">
                                <el-option v-for="location in examLocationList" :key="location.roomId"
                                    :label="location.roomName" :value="location.roomId" />
                            </el-select>
                            <el-button type="primary" @click="submitApply">提交</el-button>
                        </div>
                        <div class="certificate" v-if="reviewPassed">
                            <div>考试座位号：待分配</div>
                            <div class="print">
                                <span>准考证打印：</span>
                                <el-link>下载</el-link>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="myExamDialogVisible = false">确定</el-button>
                    <el-button @click="handleMyExamClose">取消</el-button>
                </span>
            </template>
        </el-dialog>
        <div class="apply-alert" v-show="applyAlertVisible.show">
            <p>已申请通过，请关注考试座位及准考证号</p>
            <el-button type="primary" @click="applyAlertVisible.show = false">确定</el-button>
        </div>
    </div>
</template>

<script setup>
import { getMyExamInfo, updateApprove, getRoomList } from "@/api/exam/index.js";
import { APPROVE_STATUS, APPROVE_STATUS_NAMES } from '@/const/exam.js'

const props = defineProps({
    userId: {
        type: [Number, String]
    },
})

const userExamInfo = ref({})
const approveId = ref(null)

async function getUserExamInfo(applicantId) {
    let res = await getMyExamInfo({ applicantId })
    userExamInfo.value = res.data
    approveId.value = res.data.approveId
    return res.data
}

const approveStatusText = computed(() => {
    return APPROVE_STATUS_NAMES[userExamInfo.value.approveStatus || APPROVE_STATUS.PENDING]
})

// 审核状态
const reviewPassed = computed(() => {
    return userExamInfo.value.approveStatus == APPROVE_STATUS.APPROVED
})

// 我的考试 弹窗
const myExamDialogVisible = ref(false)
const loading = ref(true)
const examLocationList = ref([])
async function myExam() {
    myExamDialogVisible.value = true
    let res = await getUserExamInfo(props.userId)
    if (res.approveId === null) {
        ElMessageBox.alert('当前暂无考试信息', '提示', {
            confirmButtonText: '确定',
        })
        myExamDialogVisible.value = false
        return false;
    }

    if (res.approveStatus == APPROVE_STATUS.APPROVED) {
        let roomRes = await getRoomList()
        examLocationList.value = roomRes.data
    }
    loading.value = false
}
function handleMyExamClose() {
    myExamDialogVisible.value = false
}

// 考场选择提交后 相关
const applyAlertVisible = reactive({
    show: false,
    message: '已申请通过，请关注考试座位及准考证号'
})
const roomId = ref(null)
async function submitApply() {
    // 批次与考场是一对一关系，所以 考场选择不需要提交
    // let res = await updateApprove({ approveId: approveId.value })
    // if (res.code == 200) {
    applyAlertVisible.show = true
    // }
}
</script>
<style scoped lang="scss">
.my-exam-dialog {
    .dialog-body {
        padding: 33px 56px 38px 56px;

        .wrap {
            display: flex;

            .exam-state-box {
                position: relative;
                margin-right: 31px;

                img {
                    width: 132px;
                    height: 132px;
                }

                .layer {
                    position: absolute;
                    top: 13px;
                    left: 20px;
                    width: 83px;
                    height: 48px;
                    background: #FA943B;
                    border-radius: 0px 18px 0px 18px;
                    color: #fff;
                    font-size: 14px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }

            .info {
                color: #666;
                font-size: 16px;

                .name {
                    color: #333333;
                    font-size: 20px;
                    font-weight: bold;
                    margin-bottom: 7px;
                }

                .date {}

                .address {
                    margin-bottom: 8px;
                }

                .certificate {
                    display: flex;
                    align-items: center;

                    &>div:first-child {
                        margin-right: 28px;
                    }

                    .print {
                        display: flex;
                        align-items: center;

                        .el-link {
                            font-size: 16px;
                        }
                    }
                }
            }
        }


    }
}

:deep(.el-dialog) {
    &:not(.is-fullscreen) {
        margin-top: 28vh !important;
    }
}

.apply-alert {
    position: fixed;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
    width: 622px;
    background: #DAEEFF;
    border: 1px solid #3C70D1;
    border-radius: 16px;
    text-align: center;
    padding: 44px 0;

    p {
        margin-bottom: 34px;
        font-size: 28px;
        color: #2B5AA2;
    }

    .el-button {
        font-size: 20px;
        width: 275px;
        height: 54px;
    }
}
</style>